<template>
  <div>
    <a-row class="box2">
      <a-row type="flex" justify="space-between" class="box2-t">
        <a-col :span="5">个人资料</a-col>
        <a-col :span="3"></a-col>
      </a-row>
      <div class="box2-b">
        <a-row type="flex" class="box2-r">
          <a-col :span="2">昵称：</a-col>
          <a-col :span="22">
            <a-col :span="20">{{msg.name}}</a-col>
            <a-col :span="4" @click="showConfirm('设置昵称','昵称',1,msg.name)">设置</a-col>
          </a-col>
        </a-row>
        <a-row type="flex" class="box2-r t">
          <a-col :span="2">头像：</a-col>
          <a-col :span="22">
            <a-col :span="20">
              <img :src="msg.icon" alt srcset />
            </a-col>
            <a-col :span="4" @click="showConfirm('设置头像','上传图片',5,msg.icon)">修改</a-col>
          </a-col>
        </a-row>
        <a-row type="flex" class="box2-r">
          <a-col :span="2">手机号：</a-col>
          <a-col :span="22">
            <a-col :span="20">{{msg.phone}}</a-col>
            <a-col :span="4" @click="showConfirm('设置手机号','手机号',2,msg.phone)">设置</a-col>
          </a-col>
        </a-row>
        <a-row type="flex" class="box2-r">
          <a-col :span="2">QQ：</a-col>
          <a-col :span="22">
            <a-col :span="20">{{msg.qq}}</a-col>
            <a-col :span="4" @click="showConfirm('设置QQ','QQ',3,msg.qq)">设置</a-col>
          </a-col>
        </a-row>
        <a-row type="flex" class="box2-r">
          <a-col :span="2">邮箱：</a-col>
          <a-col :span="22">
            <a-col :span="20">{{msg.email}}</a-col>
            <a-col :span="4" @click="showConfirm('设置邮箱','邮箱',4,msg.email)">设置</a-col>
          </a-col>
        </a-row>
      </div>
    </a-row>
    <a-modal :title="title" v-model="visible" @ok="handleOk">
      <a-form :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
        <a-form-item :label="label">
          <a-input
            v-decorator="['test', { rules: [{ required: true, message: '内容不能为空' }] }]"
            v-if="title !=='设置头像'"
          />
          <a-upload
            name="icon"
            listType="picture-card"
            :showUploadList="false"
            :customRequest="customRequest"
            @change="handleChange"
            v-else
          >
            <img v-if="icon" :src="icon" alt="icon" style=" width: 80px;
          height: 80px;" />
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传图片</div>
            </div>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
var qiniu = require("qiniu-js");
import { MY_INFO, UP_TOKEN, SAVE_INFO } from "../server";

export default {
  layout: "main",
  data() {
    return {
      form: this.$form.createForm(this, { name: "" }),
      title: "",
      label: "",
      type: 0,
      visible: false,
      loading: false,
      icon: "",
      msg: "",
      qnToken: ""
    };
  },
  created() {
    this.getInfo();
    this.getToken();
  },
  methods: {
    showConfirm(title, label, type, value) {
      this.visible = true;
      this.title = title;
      this.label = label;
      this.type = type;
      console.log(value);
      if (type == 5) {
        this.icon = value || "";
      } else {
        setTimeout(() => {
          this.form.setFieldsValue({
            test: value || ""
          });
        }, 10);
      }
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let test =
            this.type === 5 ? this.icon : this.form.getFieldValue("test");
          SAVE_INFO({
            type: this.type,
            test
          }).then(res => {
            if (res.code != 200) {
              this.$message.error(res.msg);
              return;
            } else {
              this.visible = false;
              this.$message.success(res.msg);
              this.getInfo();
            }
          });
        }
      });
    },
    customRequest(file) {
      this.loading = true;
      this.inputUpload(file.file);
    },
    inputUpload(e) {
      let that = this;
      let random1 = parseInt(Math.random() * 100000);
      let random2 = parseInt(Math.random() * 100000);
      let time = new Date().getTime();
      let d = e.name.lastIndexOf(".");
      let hz = e.name.substring(d);
      let fileName = "" + random1 + random2 + time + hz;
      let observable = qiniu.upload(e, fileName, this.qnToken);
      observable.subscribe({
        next() {},
        error() {
          that.$message.error("上传失败！");
        },
        complete(res) {
          that.loading = false;
          that.icon = "http://q7mtxum6z.bkt.clouddn.com/" + res.key;
        }
      });
    },
    handleChange() {},
    getInfo() {
      MY_INFO().then(res => {
        if (!res) return;
        this.msg = res.data;
      });
    },
    getToken() {
      UP_TOKEN().then(res => {
        if (!res) return;
        this.qnToken = res.data;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.box2 {
  margin-top: 20px;
  border: 1px solid #e8e8e8;

  .box2-t {
    height: 42px;
    line-height: 42px;
    background: #f6f6f6;
    border-bottom: 1px solid #e8e8e8;
    div:first-child {
      font-size: 16px;
      padding-left: 24px;
    }
    div:last-child {
      text-align: right;
      padding-right: 16px;
    }
  }
  .box2-b {
    padding: 10px;
    .box2-r {
      line-height: 50px;
      & > div:first-child {
        text-align: center;
      }
      & > div:last-child {
        border-bottom: 1px dashed #dddddd;
        img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
        }
        div:last-child {
          color: #0084ff;
          text-align: center;
          cursor: pointer;
        }
      }
    }
    .t {
      line-height: 100px;
    }
  }
}
.imgs {
  width: 104px;
  height: 104px;
}
</style>